import {useState,useEffect} from 'react'
import axios from 'axios'
import { NavBar,Search,Sticky } from 'react-vant';
import {useNavigate} from 'react-router-dom'
import styles from './select.module.css'
export default function Selecthuati() {
  const navigate = useNavigate()
  const [huati,setHuati] = useState([])
  const [value,setValue] = useState('')
  useEffect(()=>{
    getHuati()
  },[])
  let getHuati = async ()=>{
    let {data} = await axios.get('http://localhost:3000/gethuati')
    console.log(data);
    if(data.code === 200){
      setHuati(data.data)
    }
  }
  return (
    <>
      <NavBar
        title="话题"
        leftText="返回"
        onClickLeft={() => navigate(-1)}
      />
      <Sticky>
        <Search value={value} onChange={setValue} clearable placeholder="请输入搜索关键词" />
      </Sticky>
      {
        huati.map((item,index)=>{
          return <div key={index} className={styles.box} onClick={()=>navigate('/fabu?id='+item._id)}>#{item.name}</div>
        })
      }
    </>
  )
}
